<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="upload" enctype="multipart/form-data" action="http://oss.base.qixinyun.com/upload" method="post"
      onsubmit="openProgressBar(); return true;">
    <input type="hidden" name="MAX_FILE_SIZE" value="30000000"/>
    <input name="file" type="file" label="fileupload"/>
    <input name="indexName" type="hidden" value="file" />
    <input type="submit" value="Send File"/>
</form>

<div>
    <div id="progress" style="width: 400px; border: 1px solid black">
        <div id="progressbar" style="width: 1px; background-color: black; border: 1px solid white">&nbsp;</div>
    </div>
    <div id="tp">(progress)</div>
</div>

<script type="text/javascript">

    interval = null;

    function openProgressBar() {
        /* generate random progress-id */
        uuid = "";
        for (i = 0; i < 32; i++) {
            uuid += Math.floor(Math.random() * 16).toString(16);
        }
        /* patch the form-action tag to include the progress-id */
        document.getElementById("upload").action = "http://oss.base.qixinyun.com/upload?X-Progress-ID=" + uuid + "&token=123456";

        /* call the progress-updater every 1000ms */
        interval = window.setInterval(
            function () {
                fetch(uuid);
            },
            1000
        );
    }

    function fetch(uuid) {
        req = new XMLHttpRequest();
        req.open("GET", "http://oss.base.qixinyun.com/progress", 1);
        req.setRequestHeader("X-Progress-ID", uuid);
        req.onreadystatechange = function () {
            console.log(req);
            if (req.readyState == 4) {
                if (req.status == 200) {
                    /* poor-man JSON parser */
                    var upload = eval(req.responseText);

                    document.getElementById('tp').innerHTML = upload.state;

                    /* change the width if the inner progress-bar */
                    if (upload.state == 'done' || upload.state == 'uploading') {
                        bar = document.getElementById('progressbar');
                        w = 400 * upload.received / upload.size;
                        bar.style.width = w + 'px';
                    }
                    /* we are done, stop the interval */
                    if (upload.state == 'done') {
                        window.clearTimeout(interval);
                    }
                }
            }
        }
        req.send(null);
    }
    </script>
</body>
</html>